<style scoped lang="scss">
@import '@/styles/_variables.scss';

.tab-bar {
  width: 10rem;
  height: 1.2rem;
  background: #1a1b20;
  position: fixed;
  bottom: 0;
  left: 0;

  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;

    li {
      width: 2rem;
      height: 1.2rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      span {
        font-size: 0.4rem;
        color: #999;
        padding-bottom: .2667rem;
      }
    }
  }
}

.spanActive {
  border-bottom: 2px solid #fff !important;
}

.uploadVideo {
  span {
    width: 1.0133rem;
    height: .4rem;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .1333rem;
    position: relative;
  }

  span::after {
    content: '\e600';
    border-radius: 50%;
    position: absolute;
    font-family: 'iconfont' !important;
    font-size: .2667rem;
    color: #1a1b20;
    /* 图标颜色（与背景对比） */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
<template>
  <div class="tab-bar">
    <ul>
      <li v-for="(item, index) in tabList" :key="index" @click="changeTab(item, index)"
        :class="{ uploadVideo: index === 2 }" :class>
        <i class="iconfont {{ item.icon }}"></i>
        <span :class="{ 'spanActive': index === currentTabIndex }">{{ item.text }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { useVideoStore } from '@/store/modules/video';
import { useRouter } from 'vue-router';
const videoStore = useVideoStore();
const currentTabIndex = ref(0);

const router = useRouter();
const changeTab = (item, index) => {
  currentTabIndex.value = index;
  router.push(item.path);
  if (item.path !== '/home') {
    videoStore.pauseAll();
  }
}

const tabList = [
  {
    icon: 'icon-home',
    text: '首页',
    path: '/home'
  },
  {
    icon: 'icon-home',
    text: '关注',
    path: '/follow'
  },
  {
    icon: 'icon-home',
    text: '',
    path: '/video'
  },
  {
    icon: 'icon-home',
    text: '消息',
    path: '/message'
  },
  {
    icon: 'icon-home',
    text: '我',
    path: '/user'
  }
]
</script>